<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表渲染</title>
</head>
<body>
  <div id="demo">
    <ul>
      <li v-for="(p, index) in persons" :key="index">
        {{index}}--{{p.name}}--{{p.age}}
        <button @click="deleteP(index)">删除</button>
        <button @click="updateP(index)">更新</button>
      </li>
    </ul>
    <div>
      <h1>更新</h1>
      name:<input type="text" v-model="name"><br>
      age:<input type="text" v-model="age">
      <button @click="Realupdate(index)">更新</button>
    </div>
    <br>
    <div>
      <h1>添加</h1>
      name:<input type="text" v-model="nname"><br>
      age:<input type="text" v-model="nage">
      <button @click="addP()">添加</button>
    </div>
    <div>
      <h1>排序</h1>
      <button @click="setOrderType(1)">年龄排序</button>
      <button @click="setOrderType(0)">恢复</button>
    </div>

  </div>
  <script src="../vue.js"></script>
  <script>
    new Vue({
      el: '#demo',
      data: {
        nname: '',
        nage: '',
        name: '',
        age: undefined,
        index: '',
        persons: [
          {name: 'Tom', age: 18},
          {name: 'Jack', age: 17},
          {name: 'Bob', age: 19},
          {name: 'Mary', age: 16}
        ]
      },
      methods: {
        deleteP(index) {
          this.persons.splice(index, 1)
        },
        updateP(index){
          let temp = this.persons[index]
          this.name = temp.name
          this.age = temp.age
          this.index = index
          this.realUpdate(this.index);
        },
        realUpdate(index) {
          let newP = {name: this.name, age: this.age}
          this.persons.splice(index, 1, newP)
        },
        addP(){
          let newP = {name: this.nname, age: this.nage}
          this.persons.push(newP)
          this.nname = '',
          this.nage = undefined
        }
      }
    })
  </script>

</body>
</html>